<template>
  <div class="container">
    <baidu-map
      :center="center"
      :zoom="zoom"
      @ready="handler"
      class="baiduMap"
      :scroll-wheel-zoom="true"
    >
      <bml-marker-clusterer v-if="show" :averageCenter="true">
        <bm-marker
          v-for="(v, k) in markers"
          :position="{ lng: v.long, lat: v.lat }"
          :key="k + '1'"
          @mouseover="infoWindowOpen(v)"
          @mouseout="infoWindowClose(v)"
          :icon="{
            url: v.isAlert ? RedIcon : blueIcon,
            size: { width: 40, height: 40 },
          }"
        >
          <bm-info-window :show="v.show">
            <div>设备名称：{{ v.did }}</div>
            <div>是否报警：{{ v.isAlert ? "是" : "否" }}</div>
          </bm-info-window>
        </bm-marker>
      </bml-marker-clusterer></baidu-map
    >
  </div>
</template>

<script>
import axios from "axios";
import RedIcon from "./red.png";
import blueIcon from "./blue.png";
import { BmlMarkerClusterer } from "vue-baidu-map";
function ajax(method, url, data) {
  var request;
  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return new Promise(function(resolve, reject) {
    request.onreadystatechange = function() {
      if (request.readyState === 4) {
        if (request.status === 200) {
          resolve(request.response);
        } else {
          reject(request.status);
        }
      }
    };
    if (method.toUpperCase() === "GET") {
      var arr = [];
      for (var key in data) {
        arr.push(key + "=" + data[key]);
      }
      var getData = arr.join("&");

      request.open("GET", url, true);
      request.send(null);
    } else if (method.toUpperCase() === "POST") {
      request.open("POST", url, true);
      request.responseType = "json";
      request.setRequestHeader(
        "Content-Type",
        "application/x-www-form-urlencoded;charset=utf-8"
      );
      request.send(data);
    }
  });
}
export default {
  components: {
    BmlMarkerClusterer,
  },
  data() {
    return {
      center: {
        lat: "",
        lng: "",
      },
      show: false,
      blueIcon,
      RedIcon,
      zoom: 10,
      markers: [],
      BASE_URL: "",
      map: null,
      timer:null
    };
  },
  mounted() {
    this.BASE_URL =
      process.env.NODE_ENV === "development"
        ? "/map"
        : process.env.VUE_APP_MAP_URL;
    this.init();
   this.timer =  setInterval(async () => {
      this.show = false;
      this.map.clearOverlays();
      await this.init();
      this.$nextTick(() => {
        this.handler();
      });
    }, 10000);
  },
  methods: {
    async init() {
      let d = await ajax("get", this.BASE_URL + "/home/getlist");
      await ajax("get", this.BASE_URL + "/home/upDate?sn=xxx");
      this.markers = JSON.parse(d);
      for (let x of this.markers) {
        this.$set(x, "show", false);
      }
      this.center = {
        lng: this.markers[0].long,
        lat: this.markers[0].lat,
      };
      this.show = true;
    },
    infoWindowClose(v) {
      this.$set(v, "show", false);
    },
    infoWindowOpen(v) {
      this.$set(v, "show", true);
    },
    async handler({ BMap, map }) {
      this.map = map;
      this.center = {
        lng: this.markers[0].long,
        lat: this.markers[0].lat,
      };
    },
    beforeDestory(){
      clearInterval(this.timer)
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .baiduMap {
    height: 100%;
    width: 100%;
  }
}
</style>
